<template>
    <h2>自定义Hooks</h2>
        <hooks></hooks>
    <h2>路由</h2>
        <Nav></Nav>
    <h2>组件通信</h2>
    <div class="message">
        <h3>父组件</h3>
        <input type="text" v-model="showtext">
        <h3>文本内容展示：{{ showtext }}</h3>
        <button @click="Updateshowtext">刷新文本内容</button>
        <h3 v-show="toy">玩具：{{ toy }}</h3>
        <h3>钱：{{ money }}</h3>
        <h3>车：{{ car }}</h3>
        <h3 v-show="computer">电脑：{{ computer }}</h3>
        <button @click="emitter.emit('Getcar',car)">传车给子</button>
        <h3>用户名:{{ username }}</h3>
        <button @click="changetoy">修改孩子玩具</button>
        <button @click="changecomputer">修改孩子电脑</button>
        <Person :Sum="sum" :TalkArr="talkArr" :Add="Add" :SendToy="GetTOy" @Gettoy="Gettoy" v-model:test="username" ref="child"></Person>
    </div>
    <h2>插槽</h2>
    <div class="slot">
        <Slot>
            <template v-slot:s1>
                <h3>钱；{{ money }}</h3>
            </template>
            <template v-slot:s2>
                <h3>求积为：{{ sum }}</h3>
            </template>
        </Slot>
        <Slot>
            <template v-slot:s2>
                <h3>求和为: {{ sum }}</h3>
            </template>
        </Slot>
        <Slot>
            <template v-slot:s1>
                <h3>车：{{ car }}</h3>
            </template>
        </Slot>
        <Slot>
            <template v-slot="G">
                <ul>
                    <li v-for="i in G.Game" :key="i.id">{{ i.name }}</li>
                </ul>
            </template>
        </Slot>
    </div>
    <h2>Pinia</h2>
    <div class="pinia">
    </div>
    <Count></Count>
    <Love></Love>
    <Result></Result>
</template>
<script lang="ts" setup >
import Nav from './components/Nav.vue';
import hooks from './components/hooks.vue';
import Result from './components/Result.vue';
import Count from './components/Count.vue';
import Love from './components/Love.vue';
import Slot from './components/Slot.vue';
import { RouterView ,RouterLink} from 'vue-router';
import Person from './components/Person.vue';
import axios from 'axios';
import { reactive,ref ,provide, inject} from 'vue';
import emitter from './tools/emitter';
    
    
    
    let sum=ref(0);
    let n=ref(1);
    let toy=ref('');
    let Games=reactive([]);
    let computer=ref("");
    let username=ref("123456");
    let child=ref();
    console.log(n);
    console.log(child);
    let talkArr=reactive([
        {
            content: "",
        }
    ]);
    let money=ref(10000);
    let showtext=ref("文本原始内容");
    let car=ref("奔驰");
    function GetTOy(val:string){
        toy.value=val;
    }
    async function Add(){
        let x=await axios.get('http://api.uomg.com/api/rand.qinghua?format=json');
        talkArr.push(x.data);
    }
    emitter.on("Getcomputer",(val: any)=>{
        computer.value=val;
    })
    function GetGames(val: any){
        Object.assign(Games,val);
        console.log(Games);
    }
    function Gettoy(val: string){
        toy.value=val;
    }
    function Updateshowtext(){
        showtext.value="";
    }
    function changetoy(){
        child.value.toy='火车'
        console.log(child.value);
    }
    function changemoney(){
        money.value+=1;
    }
    function changecomputer(){
        child.value.computer='华硕';
        console.log(child.value);
    }
    defineExpose({money,car});
    provide('usemoney',{money,changemoney});
</script>
<style scoped>
    h2{
        text-align: center;
    }
    .router{   
        ul{
            display: flex;
            justify-content: space-around;
            li{
                list-style: none;
                border: 1px solid black;
                font-size: 20px;
                font-weight: 700;
            }
        }
    }
    .show{
        border-radius: 10px;
        width: 1000px;
        height: 500px;
        background-color: #ddd;
        border: 2px solid black;
        margin: 20px auto;
        overflow: hidden;
    }
    .active{
        color: blue;
        background-color: red;
    }
    .message{
        background-color: #ddd;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        border: 2px solid black;
    }
    .slot{
        background-color: #ddd;
        border: 1px solid black;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        display: flex;
        justify-content: space-around;
    }
    .pinia{
        background-color: #ddd;
        border: 1px solid black;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        button{
            margin-left: 20px;
            margin-right: 20px;
        }
    }
</style>